React テスト tips
テスト内で、stateが変更する系の関数を実行する場合は、actを使え
code: sample.js
...
export const useSample = () => {
function sampleFunction = (v) => {
...
setValue(v);
}
return {value, sampleFunction);
}
code: sample.test.js
import {renderHook, act} from '@testing-library/react-hooks';
import {useSample} from './sample.js';
test('sample', () => {
const {result} = renderHook(() => useSample());
act(() => {
result.current.sampleFunction('test');
});
expect(result.current.value).toBe('test');
});
Reactのテストは一旦「Jest」と「React Testing Library」を使っておけ
javascriptのテストランナーってなったら、まあjest。 以下あたりのライブラリをinstallしておけばいい。
jest：言わずもがな
testing-libraryファミリー
@testing-library/react：reactコンポーネントをテストする際に必要なファミリー。
@testing-library/react-hooks：react-hooksを単体で簡単にテストできるファミリー。
（注意.iconReact v18からは必要ない。上記のreactがあれば十分）
@testing-library/jest-dom：react系のテストする際に便利な拡張マッチャーが入ってる。
jest-environment-jsdom：
reactをテストするってことは、ブラウザ上のテストってことなので、jsdomのライブラリが必要
ロジック（hooks）と見た目（component）を分けておくとテストが容易になる
component側
原則、ロジックの記述を見た目に持ち込まないこと。
関数を定義、記述しない。hooks側に全て任せて、importするだけ。
関数の記述を見た目側でしてしまうと、テストしにくくなる。
ロジックと見た目の記述は引き離すといい。
でもまあ、マジで簡単な関数だけしか定義しない、とかなら無理に分ける必要もない。
hooks側
componentに使ってもらうためのプロパティや関数を定義する。
見た目要素から切り離すだけで、テストしやすくなる。
MSWを使ってテストしたい場合は以下を参照
React Routerが絡むテストの場合は...
コンポーネントのレンダリングロジックをテストしたいなら...
render, screen（from @testing-library/react）あたりを使っていけ。
その際は、hooksを全てモック化して、レンダリングロジックだけ集中してテストできるようにしよう。
code: sample.js
import * as hooksModule from "./hooks";
const mockFn = () => {
return {
wordInfo: { word: "apple", meanings: "りんご" }, isLoading: false,
notFound: false,
};
};
describe("SearchResultPage", () => {
test("test aac", async () => {
jest.spyOn(hooksModule, "useSearchedWordInfo").mockImplementation(mockFn);
render(<SearchResultPage />);
...